<template>
  <view class="page">
    <!--		轮播图-->
    <banner height="320rpx" :position="10"></banner>
    <!--		我要加入勤工俭学-->
    <view
      class="join-work-study-program"
      @click="() => $uni.navigateTo({ url: handleUrlParams(
				'/markingCampaign/pages/dailyNews/partTimeJobRecruit/workStudyProgram/introduce',
				{
					sourceLocation: '兼职信息列表页'
				}
      ) })"
    >
      <view class="icon-placeholder"></view>
      <image class="icon" :src="thumbsUpIcon"></image>
      <view class="title">我要加入勤工俭学</view>
      <view class="join-btn">加入</view>
    </view>
    <!--		搜索框-->
    <!--    <view class="search-container">-->
    <!--      <image class="icon" :src="searchIcon"></image>-->
    <!--      <input type="text" v-model="searchContent" placeholder="兼职搜索" class="input" @confirm="resetPaginationAndReload" />-->
    <!--    </view>-->
    <!--		招聘状态筛选-->
    <view class="recruitment-status-filter">
      <view
        class="item"
        v-for="item in recruitmentStatusList"
        :key="item.value"
        :class="{ active: item.value === recruitmentStatus }"
        @click="
          () => {
            recruitmentStatus = item.value
            resetPaginationAndReload()
          }
        "
        >{{ item.label }}</view
      >
    </view>
    <!--		兼职列表-->
    <view class="part-time-job-list">
      <template v-if="list.length > 0">
				<view
					class="item"
					v-for="(item, index) in list"
					:key="index"
					@click="
          () => {
            $uni.navigateTo({
              url: handleUrlParams('/markingCampaign/pages/dailyNews/partTimeJobRecruit/details/index', {
                recruitmentId: item.recruitmentId,
              }),
            })
          }
        "
				>
					<view class="header">
						<!--						标题-->
						<view class="left">
							<!--						招聘标题-->
							<view class="recruitmentTitle">
								<text>{{ item.recruitmentTitle }}</text>
							</view>
						</view>
						<view class="center">
							<!--					急聘标识-->
							<view class="recruit-urgently" v-if="item.isWanted === 1">急聘</view>
							<!--						已结束标识-->
							<view class="recruit-urgently expired" v-else-if="item.isWanted === 2">已结束</view>
						</view>
						<view class="right">
							<!--					招聘价格-->
							<view class="price">{{ item.recruitmentPrice }}</view>
						</view>
					</view>
					
					<view class="content">
						<!--						发布时间-->
						<view class="publish-time">{{ item.publishTime }}</view>
						<!--						说明-->
						<view class="note">{{ item.recruitmentDescription }}</view>
					</view>
					
					<view class="footer">
						<!--					标签列表-->
						<view class="label-list">
							<view class="label-item" v-for="label in item.recruitmentTagsList" :key="label">{{ label }}</view>
						</view>
						<!--					查看详情按钮-->
						<view class="view-detail-btn">
							<text>查看详情 &gt;</text>
						</view>
					</view>
				</view>
        <uni-load-more :status="loadMoreStatusText"></uni-load-more>
      </template>

      <empty v-else height="60vh"></empty>
    </view>
  </view>
</template>

<script>
import banner from "@/components/banner.vue"
import searchIcon from "./assets/search.png"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"
import shareInfo from "@/utils/shareInfo"
import urlUtils from "@/utils/urlUtils"
import empty from "@/components/empty.vue"
import thumbsUpIcon from "./assets/thumbs_up.png"

export default {
  components: { banner, uniLoadMore, empty },
  data() {
    return {
      searchIcon,
      searchContent: "", // 搜索内容
      recruitmentStatus: "", // 招聘状态
      // 招聘状态列表
      recruitmentStatusList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "招聘中",
          value: "Recruit",
        },
        {
          label: "已结束",
          value: "Ended",
        },
      ],
      pagination: {
        current: 1,
        size: 10,
      },
      list: [],
      loadMoreStatusText: "more",
      thumbsUpIcon,
    }
  },
  methods: {
    handleUrlParams,
    getShowImage,
    async getList() {
      if (this.loadMoreStatusText === "loading") {
        return
      }
      this.loadMoreStatusText = "loading"
      const data = await request({
        url: "recruitment/getPage",
        data: {
          current: this.pagination.current,
          size: this.pagination.size,
          searchContent: this.searchContent,
          recruitmentStatus: this.recruitmentStatus,
        },
        errorHandle: true,
      })
      this.list.push(...data.records)
      if (this.list.length >= data.total) {
        this.loadMoreStatusText = "noMore"
      } else {
        this.loadMoreStatusText = "more"
      }
    },
    //重置分页并重新加载数据
    resetPaginationAndReload() {
      return new Promise((resolve, reject) => {
        this.pagination.current = 1
        this.list = []
        this.loadMoreStatusText = "more"
        uni.showLoading({
          title: "加载中",
        })
        this.getList().finally(() => {
          uni.hideLoading()
          resolve()
        })
      })
    },
  },
  //到达页面底部时触发
  onReachBottom() {
    this.pagination.current++
    this.getList()
  },
  //下拉刷新
  onPullDownRefresh() {
    this.resetPaginationAndReload().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  onLoad() {
    this.resetPaginationAndReload()
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
      path: urlUtils.getCurrentPageUrl(),
    })
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	background: var(--gray-background-color);
	min-height: 100vh;
  > .join-work-study-program {
    margin: 0 60rpx;
    display: flex;
    align-items: center;
    background: white;
    box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.16);
    padding: 10rpx;
    position: relative;
    border-radius: 45rpx;
    transform: translateY(-45rpx);
    > .icon-placeholder {
      width: 200rpx;
    }
    > .icon {
      position: absolute;
      bottom: 0;
      left: 44rpx;
      width: 180rpx;
      height: 132rpx;
    }
    > .title {
      width: 0;
      flex: 1;
      font-size: 32rpx;
      text-align: center;
    }
    > .join-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 70rpx;
      color: white;
      font-size: 30rpx;
      background: #dc7633;
      border-radius: 35rpx;
    }
  }
  > .recruitment-status-filter {
    padding: {
      left: 30rpx;
      right: 30rpx;
      bottom: 10rpx;
    }
    font-size: 30rpx;
    display: flex;
    overflow-x: auto;
    > .item {
      margin-right: 30rpx;
      position: relative;
      &.active {
        color: var(--theme-color);
      }
      &.active::after {
        content: "";
        display: block;
        width: 100%;
        height: 4rpx;
        background: #ffd658;
        position: absolute;
        bottom: -10rpx;
      }
    }
  }
  > .part-time-job-list {
    padding: 0 30rpx;
		> .item {
			padding: 30rpx;
			background: var(--background-color);
			margin-top: 30rpx;
			border-radius: 20rpx;
			> .header {
				display: flex;
				align-items: center;
				> .left {
					> .recruitmentTitle {
						font-size: 32rpx;
						//文本只显示一行，溢出加省略号
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 100%;
						font-weight: bold;
					}
				}
				> .center {
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					> .recruit-urgently {
						padding: 4rpx 10rpx;
						border: 2rpx solid rgba(199, 84, 70, 1);
						border-radius: 10rpx;
						color: rgba(199, 84, 70, 1);
						font-size: 26rpx;
						width: max-content;
						&.expired {
							color: #415058;
							border-color: #415058;
						}
					}
				}
				> .right {
					> .price {
						font-size: 30rpx;
						color: #ff6219;
					}
				}
			}
			> .content {
				margin-top: 10rpx;
				> .publish-time {
					color: #999999;
					font-size: 26rpx;
				}
				> .note {
					font-size: 26rpx;
					margin-top: 10rpx;
					//文本溢出部分自动换行
					word-break: break-all; /* 允许在任意字符间断行 */
					width: 100%;
					color: #666666;
					line-height: 1.5;
				}
			}
			> .footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				> .label-list {
					display: flex;
					> .label-item {
						margin-right: 20rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #ffd658;
						padding: 6rpx 16rpx;
						font-size: 26rpx;
						color: #845800;
					}
				}
				> .view-detail-btn {
					font-size: 28rpx;
					color: #ff6600;
				}
			}
		}
  }
}
</style>
